<template>
  <div v-if="stationData" class="console">
    <div class="left">
      <div class="order">
        <div class="title">订单监控</div>
        <div class="flex">
          <div class="blue-box">
            <div>订单量</div>
            <div class="number">
              <span class="blue">{{ stationData.orderQuantity }}</span
              >件
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>收件量</div>
            <div class="number">
              <span class="blue">{{ stationData.receivedQuantity }}</span
              >件
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>近3天待揽</div>
            <div class="number">
              <span class="blue">{{ stationData.toBeSolicited }}</span
              >件
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="aging">
        <div class="title">时效监控</div>
        <div class="flex">
          <div class="blue-box">
            <div>交货滞留量</div>
            <div class="number">
              <span class="blue">{{ stationData.deliverBacklog }}</span
              >件
            </div>
            <div>*T-1</div>
          </div>
          <div class="blue-box">
            <div>交货滞留率</div>
            <div class="number">
              <span class="blue">{{ stationData.timelyRatio }}</span
              >件
            </div>
            <div>*T-1</div>
          </div>
          <div class="blue-box">
            <div class="text">揽收超48小时未交货量</div>
            <div class="number">
              <span class="blue">{{ stationData.undelivered }}</span
              >件
            </div>
            <div>*T-2</div>
          </div>
          <div class="blue-box">
            <div>当前签收率</div>
            <div class="number">
              <span class="blue">{{ stationData.currentSigningRate }}</span
              >%
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>一阶段签收率</div>
            <div class="number">
              <span class="blue">{{ stationData.firstSigningRate }}</span
              >%
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>二阶段签收率</div>
            <div class="number">
              <span class="blue">{{ stationData.secondSigningRate }}</span
              >%
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>中心发件量</div>
            <div class="number">
              <span class="blue">{{ stationData.numberOfShipments }}</span
              >万件
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>网点未操作量</div>
            <div class="number">
              <span class="blue">{{ stationData.unhandledQuantity }}</span
              >件
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>回货进度</div>
            <div class="number">
              <span class="blue">{{ stationData.returnProgress }}</span
              >%
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div class="operate">
        <div class="title">操作质量</div>
        <div class="flex">
          <div class="blue-box">
            <div>未称重</div>
            <div class="number">
              <span class="blue">{{ stationData.unWeighed }}</span
              >件
            </div>
          </div>
          <div class="blue-box">
            <div>疑似遗失未找回</div>
            <div class="number">
              <span class="blue">{{ stationData.unRecovered }}</span
              >件
            </div>
          </div>
          <div class="blue-box">
            <div>虚假签收</div>
            <div class="number">
              <span class="blue">{{ stationData.falseReceipt }}</span
              >件
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div>
        <div class="title">网点工单</div>
        <div class="flex">
          <div class="blue-box">
            <div>处理中</div>
            <div class="number">
              <span class="red">{{ stationData.networkProcessing }}</span
              >件
            </div>
            <div>即将超时0</div>
          </div>
          <div class="blue-box">
            <div>订单待揽收</div>
            <div class="number">
              <span class="red">{{ stationData.networkPendingCollection }}</span
              >件
            </div>
            <div>45min待揽0</div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">我的工单</div>
        <div class="flex">
          <div class="blue-box">
            <div>处理中</div>
            <div class="number">
              <span class="blue">{{ stationData.myProcessing }}</span
              >件
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>即将超时</div>
            <div class="number">
              <span class="red">{{ stationData.myAboutToTimeOut }}</span
              >件
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">综合KPI考核</div>
        <div class="flex">
          <div class="blue-box">
            <div>今日预估单票激励</div>
            <div class="number">
              <span class="blue">{{ stationData.singleTicketIncentive }}</span
              >元/票
            </div>
            <div></div>
          </div>
          <div class="blue-box">
            <div>本月累计有偿派件量</div>
            <div class="number">
              <span class="blue">{{ stationData.paidDeliveryVolume }}</span
              >票
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">经营看板</div>
        <div class="flex">
          <div class="blue-box">
            <div>昨日考核款</div>
            <div class="number">
              <span class="red">{{ stationData.yesterdayFund }}</span
              >元
            </div>
            <div>单票{{ stationData.yesterdayFundSingle }}</div>
          </div>
          <div class="blue-box">
            <div>当月考核款</div>
            <div class="number">
              <span class="red">{{ stationData.thisMonthFund }}</span
              >万元
            </div>
            <div>单票{{ stationData.thisMonthFundSingle }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="network">
        <div class="title">考核指标分析</div>
        <div class="title text m10">网络质量</div>
        <div class="flex">
          <div class="blue-box">
            <div>昨日遗失率</div>
            <div class="number">
              <span class="blue">{{ stationData.yesterdayLossRate }}</span
              >ppm
            </div>
            <div>*时间{{ stationData.yesterdayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>昨日破损率</div>
            <div class="number">
              <span class="blue">{{ stationData.yesterdayDamageRate }}</span
              >ppm
            </div>
            <div>*时间{{ stationData.yesterdayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>昨日电联履约率</div>
            <div class="number">
              <span class="blue">{{ stationData.yesterdayCallRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.yesterdayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>今日遗失率</div>
            <div class="number">
              <span class="blue">{{ stationData.todayLossRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>今日破损率</div>
            <div class="number">
              <span class="blue">{{ stationData.todayDamageRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="red-box">
            <div>今日电联履约率</div>
            <div class="number">
              <span class="red">{{ stationData.todayCallRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="red-box">
            <div>信息及时率</div>
            <div class="number">
              <span class="red">{{ stationData.timelinessRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="red-box">
            <div>信息准确率</div>
            <div class="number">
              <span class="red">{{ stationData.accuracyRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="red-box">
            <div>信息完整率</div>
            <div class="number">
              <span class="red">{{ stationData.integrityRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
        </div>
      </div>
      <div class="develop">
        <div class="title text">末端发展</div>
        <div class="flex">
          <div class="red-box">
            <div>遗失率</div>
            <div class="number">
              <span class="red">{{ stationData.lossRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
        </div>
      </div>
      <div class="home">
        <div class="title text">送货上门</div>
        <div class="flex">
          <div class="blue-box">
            <div>回访真实率</div>
            <div class="number">
              <span class="blue">{{ stationData.realisticRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>回执上门履约率</div>
            <div class="number">
              <span class="blue">{{ stationData.fulfillmentRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
          <div class="blue-box">
            <div>客诉率</div>
            <div class="number">
              <span class="blue">{{ stationData.customerComplaintRate }}</span
              >%
            </div>
            <div>*时间{{ stationData.todayDateStr }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStation } from "@/api/control";

export default {
  name: "Console",
  data() {
    return {
      stationData: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getStationData();
    },
    getStationData() {
      getStation().then((res) => {
        this.stationData = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.console {
  padding: 30px 10px 30px 30px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;

  .blue {
    font-weight: 500;
    font-size: 30px;
    color: #2087d0;
  }

  .red {
    font-weight: 500;
    font-size: 30px;
    color: #f45959;
  }

  .blue-box {
    box-shadow: 0 0 8px 0 #2087d0 inset;
    &:hover {
      box-shadow: 0 0 8px 0 #2087d0 inset;
      box-shadow: 0px 0px 8px 8px #2087d0;
    }
  }

  .red-box {
    box-shadow: 0 0 8px 0 #f45959 inset;
  }

  .blue-box,
  .red-box {
    margin-bottom: 10px;
    padding: 16px 24px;
    width: 180px;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    border-radius: 8px;

    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .text:hover {
      overflow: visible;
      white-space: normal;
    }

    .number {
      margin: 5px 0;
    }
  }

  .title {
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .flex {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .left {
    width: 628px;

    & > div {
      padding: 20px 24px 10px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    }

    & > div + div {
      margin-top: 16px;
    }
  }

  .center {
    width: 572px;

    & > div {
      padding: 20px 24px 10px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    }

    & > div + div {
      margin-top: 16px;
    }

    .blue-box {
      width: 252px;
    }
  }

  .right {
    padding: 24px;
    width: 628px;
    height: 845px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);

    & > div + div {
      margin-top: 10px;
    }

    .m10 {
      margin-top: 20px;
    }

    .text {
      color: #666;
    }
  }
}
</style>
